<template>
  <div class="middle-device-details">
    <DynamicForm ref="dynamicFormRef" :rulesForm="state.detailsForm" :refresh="state.refresh" type="see"/>
    <div class="middle-device-details-record">
      <el-card class="device-details-repair">
        <template #header>
          <span class="device-details-repair-title">维修记录</span>
        </template>
        <DynamicTable :columns="state.repairColumns" :table="state.repairTable" :data="state.repairData"/>
      </el-card>
      <el-card class="device-details-repair">
        <template #header>
          <span class="device-details-repair-title">报废记录</span>
        </template>
        <DynamicTable :columns="state.scrapColumns" :table="state.scrapTable" :data="state.scrapData"/>
      </el-card>
    </div>
    <el-card class="device-details-repair">
      <template #header>
        <span class="device-details-repair-title">流转记录</span>
      </template>
      <DynamicTable :columns="state.replaceColumns" :table="state.replaceTable" :data="state.replaceData"/>
    </el-card>
  </div>
</template>

<script lang="ts" setup>

import {reactive, onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';

import DynamicForm from '@/components/layout/form/dynamic-form.vue';
import DynamicTable from '@/components/layout/table/dynamic-table.vue';

import {deviceDetailsForm} from '@/assets/script/middle/forms/device/device-form';
import {deviceRepairColumns, deviceReplaceColumns, deviceScrapColumns} from '@/assets/script/middle/columns/device';
import {findByIdApi} from "@/api/device";
import {listBmsDeviceRepairPageApi} from "@/api/device/repair";
import {listBmsDeviceReplacePageApi} from "@/api/device/replace";

const dynamicFormRef = ref(DynamicForm)
const dynamicTableRef = ref(DynamicTable)

const route = useRoute()

const state = reactive({
  detailsForm: JSON.parse(JSON.stringify(deviceDetailsForm)),
  repairColumns: deviceRepairColumns,
  repairData: [],
  repairTable: {
    pageIndex: 1,
    pageSize: 15,
    page: false,
    total: 0
  },
  replaceData: [],
  replaceTable: {
    pageIndex: 1,
    page: false,
    pageSize: 15,
    total: 0
  },
  scrapColumns: deviceScrapColumns,
  replaceColumns: deviceReplaceColumns,
  scrapData: [],
  scrapTable: {
    pageIndex: 1,
    page: false,
    pageSize: 15,
    total: 0
  },
  refresh: 0
})

onMounted(() => {
  if (route.query?.id) {
    findById({id: route.query.id})
    listBmsDeviceRepairPage({deviceId: route.query.id, repairType: 0, pageSize: 200})
    listBmsDeviceRepairPage({deviceId: route.query.id, repairType: 1, pageSize: 200})
    listBmsDeviceReplacePage({deviceId: route.query.id, repairType: 1, pageSize: 200})
  }
})

const findById = (params = {}) => {
  findByIdApi(params).then((data: any) => {
    const card = state.detailsForm[0].card
    card?.forEach((e: any) => {
      if (!e.line) {
        if (e.name === 'status') {
          e[e.name] = e.options.find(({value = 0}) => value === (data[e.name] || 0))?.label
        } else {
          e[e.name] = data[e.name] || '--';
        }
      }
    })
    state.refresh = Math.random()
    console.log('deviceDetailsForm', state.detailsForm, data)
  })
}

const listBmsDeviceRepairPage = (params: any) => {
  listBmsDeviceRepairPageApi(params).then((data: any) => {
    if (data.code === 0) {
      if (params['repairType'] === 0) {
        state.repairData = data.data
        state.repairTable.total = data.total
        state.repairTable.pageIndex = data.pageIndex
        state.repairTable.pageSize = data.pageSize
      } else {
        state.scrapData = data.data
        state.scrapTable.total = data.total
        state.scrapTable.pageIndex = data.pageIndex
        state.scrapTable.pageSize = data.pageSize
      }
    }
  })
}

const listBmsDeviceReplacePage = (params: any) => {
  listBmsDeviceReplacePageApi(params).then((data: any) => {
    if (data.code === 0) {
      state.replaceData = data.data
      state.replaceTable.total = data.total
      state.replaceTable.pageIndex = data.pageIndex
      state.replaceTable.pageSize = data.pageSize
    }
  })
}

</script>